<!--
 * @Description: 
 * @Author: Zhangx
 * @Date: 2023-05-15 16:19:56
 * @LastEditors: Zhangx
 * @LastEditTime: 2023-07-28 14:19:47
-->
<template>
  <el-button @click="dialogBtn">打開彈窗</el-button>
  <tipDialog
      :dialogVisible="state.dialogVisible"
      :dialogTitle="state.dialogTitle"
      :cancelText="state.cancelText"
      :confirmText="state.confirmText"
      :saveText="state.saveText"
      @cancel-click="cancelClick"
      :close-icon="true"
      dialog-width="30%"
    >
      <template #body>
        <div class="dialog_title">
          彈窗內容
        </div>
      </template>
    </tipDialog>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import tipDialog from "../package/tipDialog.vue";

const state = reactive({
  dialogVisible: false,
  dialogTitle: '自定義彈窗標題',
  cancelText: '跳过',
  confirmText: '确认',
  saveText: '保存',
})
const dialogBtn = () => {
  state.dialogVisible = true
}
const cancelClick = () => {
  state.dialogVisible = false
}

</script>

<style scoped>
.dialog_title {
  display: flex;
  justify-content: center;
}
</style>
